<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_photo_13')">
            <template #right>
                <a class="add-btn" :class="{'add-ok' : fileList.length > 0}" @click="save">
                    {{ $t('sure') }}
                </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div class="add-body">
                <div class="add-item">
                    <div>{{ $t('circle_photo_23') }}</div>
                    <div class="add-img">
                        <div><van-uploader v-model="fileList" multiple :max-count="9" :after-read="upload"/></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Uploader, Toast } from 'vant';
export default {
    name: 'UploadPhotoImg',
    components: {
        vanUploader: Uploader,
        vanToast: Toast
    },
    data() {
        return {
            fileList: [],
            wcaId: this.$route.params.wcaId
        };
    },
    methods: {
        async upload(file) {
            if (file instanceof Array) {
                for (let i = 0; i < file.length; i++) {
                    file[i].status = 'uploading';
                }
                for (let i = 0; i < file.length; i++) {
                    // this.uploadHandle(file[i]);
                    // file[i].status = 'uploading';
                    let formData = new FormData();
                    formData.append('file', file[i].file);
                    try {
                        const response = await this.$axios.post('/app/api/file', formData);
                        console.log('response', response);
                        file[i].uploadUrl = response.data.url;
                        file[i].status = 'done';
                    } catch (error) {
                    }
                }
            } else {
                this.uploadHandle(file);
            }
        },
        uploadHandle(file) {
            file.status = 'uploading';
            let formData = new FormData();
            formData.append('file', file.file);
            this.$axios.post('/app/api/file', formData).then(res => {
                // this.imgList.push({url: res.data.url, index: index});
                file.uploadUrl = res.data.url;
                file.status = 'done';
            });
        },
        save() {
            if (this.fileList.length > 0) {
                let imgList = [];
                this.fileList.forEach((item) => {
                    imgList.push({apName: item.file.name, apPath: item.uploadUrl});
                });
                this.$axios.post(`/app/api/trainee/work-circle/atlas/picture/${this.wcaId}`, imgList).then(res => {
                    Toast({message: this.$t('upload_img_success'), forbidClick: true});
                    this.$router.go(-1);
                });
            }
        }
    }
};
</script>

<style scoped lang="less">
    .add-ok {
        color: #1a1a1a !important;
    }
    .add-body {
        margin-top: 70px;
        .add-item {
            margin-bottom: 15px;
            &>div:first-child {
                margin-bottom: 5px;
                padding: 0 10px;
            }
            .add-img {
                padding: 20px 10px;
                background: #fff;
                display: flex;
                align-content: center;
                justify-content: space-between;
            }
        }
    }
    .overwrite-title {
        display: flex;
        align-content: center;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        color: #333;
    }
    .add-btn {
        height: 55px;
        line-height: 55px;
        padding: 0 15px;
        font-size: 16px;
        color: #ccc;
    }
</style>
